<template>
  <view class="container">
    <view class="records-list">
      <view v-if="medicalRecords.length === 0" class="empty-state">
        <van-empty description="暂无诊疗记录" />
      </view>

      <view v-else>
        <van-collapse v-model="activeNames" accordion @change="handleCollapseChange">
          <van-collapse-item
            v-for="record in medicalRecords"
            :key="record.id"
            :title="`${record.date} - ${record.doctorName}`"
            :name="record.id.toString()"
          >
            <template #value>
              <van-tag type="primary" size="small">{{ record.department }}</van-tag>
            </template>
            
            <view class="record-detail">
              <van-cell-group>
                <van-cell title="就诊科室" :value="record.department" />
                <van-cell title="主治医生" :value="record.doctorName" />
                <van-cell title="就诊时间" :value="record.date" />
                <van-cell title="主要症状" :value="record.symptoms" />
                <van-cell title="诊断结果" :value="record.diagnosis" />
                <van-cell title="治疗方案" :value="record.treatment" />
              </van-cell-group>
              
              <view v-if="record.prescriptions.length > 0" class="prescriptions-section">
                <van-divider>开具处方</van-divider>
                <van-cell-group>
                  <van-cell
                    v-for="(prescription, index) in record.prescriptions"
                    :key="index"
                    :title="prescription.medicine"
                    :label="`${prescription.dosage} | ${prescription.usage}`"
                    :value="`￥${prescription.price}`"
                  />
                </van-cell-group>
              </view>
              
              <view v-if="record.examinations.length > 0" class="examinations-section">
                <van-divider>检查项目</van-divider>
                <van-cell-group>
                  <van-cell
                    v-for="(exam, index) in record.examinations"
                    :key="index"
                    :title="exam.name"
                    :value="`￥${exam.price}`"
                    is-link
                    @click="viewExamResult(exam)"
                  />
                </van-cell-group>
              </view>
              
              <view class="record-actions">
                <van-button
                  type="primary"
                  size="small"
                  plain
                  @click="downloadRecord(record)"
                >
                  下载病历
                </van-button>
                <van-button
                  size="small"
                  @click="shareRecord(record)"
                >
                  分享病历
                </van-button>
              </view>
            </view>
          </van-collapse-item>
        </van-collapse>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

interface Prescription {
  medicine: string;
  dosage: string;
  usage: string;
  price: number;
}

interface Examination {
  name: string;
  price: number;
  result?: string;
}

interface MedicalRecord {
  id: number;
  date: string;
  department: string;
  doctorName: string;
  symptoms: string;
  diagnosis: string;
  treatment: string;
  prescriptions: Prescription[];
  examinations: Examination[];
}

const activeNames = ref<string[]>([]);

const medicalRecords = ref<MedicalRecord[]>([
  {
    id: 1,
    date: "2024-01-15",
    department: "内科",
    doctorName: "张医生",
    symptoms: "头痛、发热",
    diagnosis: "上呼吸道感染",
    treatment: "对症治疗，多休息，多饮水",
    prescriptions: [
      {
        medicine: "阿莫西林胶囊",
        dosage: "0.25g",
        usage: "每日3次，每次2粒",
        price: 15.8
      },
      {
        medicine: "布洛芬缓释胶囊",
        dosage: "0.3g",
        usage: "每日2次，每次1粒",
        price: 12.5
      }
    ],
    examinations: [
      {
        name: "血常规",
        price: 25,
        result: "白细胞计数偏高"
      }
    ]
  },
  {
    id: 2,
    date: "2024-01-08",
    department: "外科",
    doctorName: "李医生",
    symptoms: "右上腹疼痛",
    diagnosis: "急性胆囊炎",
    treatment: "药物治疗，观察病情变化",
    prescriptions: [
      {
        medicine: "头孢克肟分散片",
        dosage: "0.1g",
        usage: "每日2次，每次2片",
        price: 28.6
      }
    ],
    examinations: [
      {
        name: "腹部B超",
        price: 80,
        result: "胆囊壁增厚"
      },
      {
        name: "肝功能检查",
        price: 65,
        result: "正常范围"
      }
    ]
  }
]);

const viewExamResult = (exam: Examination) => {
  if (exam.result) {
    uni.showModal({
      title: exam.name + "结果",
      content: exam.result,
      showCancel: false
    });
  } else {
    uni.showToast({
      title: "检查结果暂未出具",
      icon: "none"
    });
  }
};

const downloadRecord = (record: MedicalRecord) => {
  uni.showToast({
    title: "下载功能开发中",
    icon: "none"
  });
};

const shareRecord = (record: MedicalRecord) => {
  uni.showToast({
    title: "分享功能开发中",
    icon: "none"
  });
};

const handleCollapseChange = (names: string[]) => {
  console.log("折叠面板变化:", names);
};

onLoad(() => {
  console.log("诊疗记录页面 onLoad");
});
</script>

<style lang="scss">
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.records-list {
  padding: 16rpx;
}

.record-detail {
  background: #f8f9fa;
  border-radius: 16rpx;
  margin: 16rpx;
  overflow: hidden;
}

.prescriptions-section,
.examinations-section {
  margin-top: 16rpx;
}

.record-actions {
  padding: 32rpx;
  display: flex;
  gap: 24rpx;
  justify-content: center;
}

.empty-state {
  padding: 100rpx 0;
}
</style>